<template>
	<view>
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed bg-bgcolor" :style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px'
				}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="$wanlshop.back(1)"></text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					<view v-if="iShead">更多推荐</view>
					<view v-else class="userinfo">
						<block v-if="data.shop">
							<view class="cu-avatar round" :style="{
									backgroundImage: `url(${$wanlshop.oss( data.shop.avatar, 35, 35, 2, 'avatar' )})`
								}"></view>
							<view class="text-cut margin-lr-xs text-sm">
								{{ data.shop.shopname }}
							</view>
						</block>
						<block v-else>
							<view class="cu-avatar round" :style="{
									backgroundImage: `url(${$wanlshop.oss( data.user.avatar, 35, 35, 2, 'avatar' )})`
								}"></view>
							<view class="text-cut margin-lr-xs text-sm">
								{{ data.user.nickname }}
							</view>
						</block>
						<view class="cu-tag round bg-white" v-if="data.isFollow === 1"
							@tap="handleFollow(data.user_no)">
							<text class="wlIcon-31guanbi margin-right-xs"></text>
							取关
						</view>
						<view class="cu-tag round bg-orange" v-else @tap="handleFollow(data.user_no)">
							<text class="wlIcon-31xuanze margin-right-xs"></text>
							关注
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 主体内容-->
		<view class="wanl-find bg-white" id="main">
			<!-- 内容 -->
			<view class="content padding-bj" v-if="data.type == 'new'">
				<view class="flex align-center">
					<view class="calendar text-center" :style="{
							backgroundImage: `url(${$wanlshop.appstc('/common/calendar.png')})`
						}">
						{{ data.createtime_date }}
					</view>
					<view class="margin-left-xs"><text class="text-bold">今日上新</text></view>
				</view>
				<view class="wanl-gray-dark padding-tb-sm">
					<rich-text :nodes="data.content"></rich-text>
				</view>
				<wanl-more :goods="data.goods" />
			</view>
			<view class="content" v-if="data.type == 'want' || data.type == 'show'">
				<view class="swiper-box">
					<swiper circular="true" autoplay="true" @change="swiperChange($event)">
						<swiper-item v-for="(swiper, index) in data.images" :key="index">
							<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="indicator">{{ data.current + 1 }}/{{ data.images.length }}</view>
				</view>
				<scroll-view class="scroll-view padding-top-bj padding-left-bj"
					:class="[data.goods.length == 1 ? 'padding-right-bj' : '']" scroll-x="true">
					<view class="scroll-view-item radius-bock" :class="[data.goods.length == 1 ? 'col-1' : '']"
						v-for="(goods, sub) in data.goods" :key="goods.id" @tap="onGoods(goods.id)">
						<view class="img">
							<image :src="$wanlshop.oss(goods.image, 50, 50)"></image>
						</view>
						<view class="goodsinfo text-cut text-df">
							{{ goods.title }}
							<view class="flex align-center">
								<text class="text-price text-orange">{{ goods.price }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="wanl-gray-dark padding-lr-bj padding-top-sm">
					<rich-text :nodes="data.content"></rich-text>
				</view>
			</view>
			<!-- 底部 -->
			<view class="flex justify-between padding-bj align-center">
				<view @tap="handleComments()" v-if="common.appConfig.comment_switch == 'Y'">
					<view class="cu-avatar round sm margin-right-xs" :style="{
							backgroundImage: `url(${$wanlshop.oss( user.avatar, 35, 35, 2, 'avatar' )})`
						}"></view>
					<text class="text-sm wanl-gray">快来评论吧</text>
				</view>
				<view v-else></view>
				<view class="flex">
					<view :class="{ 'wanl-orange': data.isLike === 1 }" @tap="handleLike()">
						<text class="margin-right-xs"
							:class="[data.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
						{{ data.likes }}
					</view>
					<view class="margin-left" @tap="handleComments()" v-if="common.appConfig.comment_switch == 'Y'">
						<text class="wlIcon-pinglun margin-right-xs"></text>
						{{ data.comments }}
					</view>
					<view class="margin-left">
						<text class="wlIcon-yueduliang margin-right-xs"></text>
						{{ data.views }}
					</view>
				</view>
			</view>
		</view>
		<!-- 列表内容 ######################################################################################-->
		<view class="wanl-find bg-white solid-top" v-for="(item, index) in listData" :key="item.id"
			v-if="item.type != 'activity'">
			<!-- 头部 -->
			<view class="userinfo padding-bj">
				<view v-if="data.shop" class="avatar">
					<view @tap="handleUser(data.user_no)" class="cu-avatar round margin-right-bj" :style="{
							backgroundImage: `url(${$wanlshop.oss( data.shop.avatar, 35, 35, 2, 'avatar' )})`
						}"></view>
					<view>
						<view>
							<text @tap="handleUser(data.user_no)" class="text-df text-bold5 wanl-black margin-right-bj">
								{{ data.shop.shopname }}
							</text>
						</view>
						<view class="wanl-gray text-sm">
							{{ $wanlshop.timeToDate(item.createtime) }}
						</view>
					</view>
				</view>
				<view v-else class="avatar">
					<view @tap="handleUser(data.user_no)" class="cu-avatar round margin-right-bj" :style="{
							backgroundImage: `url(${$wanlshop.oss( data.user.avatar, 35, 35, 2, 'avatar' )})`
						}"></view>
					<view>
						<view>
							<text @tap="handleUser(data.user_no)" class="text-df text-bold5 wanl-black margin-right-bj">
								{{ data.user.nickname }}
							</text>
						</view>
						<view class="wanl-gray text-sm">
							{{ $wanlshop.timeToDate(item.createtime) }}
						</view>
					</view>
				</view>
				<view class="cu-tag round bg-bgcolor" v-if="data.isFollow === 1" @tap="handleFollow(data.user_no)">
					<text class="wlIcon-31guanbi margin-right-xs"></text>
					取关
				</view>
				<view class="cu-tag round bg-orange" v-else @tap="handleFollow(data.user_no)">
					<text class="wlIcon-31xuanze margin-right-xs"></text>
					关注
				</view>
			</view>
			<!-- 内容 -->
			<view class="content padding-lr-bj" v-if="item.type == 'new'">
				<view class="flex align-center">
					<view class="calendar text-center" :style="{
							backgroundImage: `url(${$wanlshop.appstc('/common/calendar.png')})`
						}">
						{{ item.createtime_date }}
					</view>
					<view class="margin-left-xs"><text class="text-bold">今日上新</text></view>
				</view>
				<view class="wanl-gray-dark padding-tb-sm">
					<rich-text :nodes="item.content"></rich-text>
				</view>
				<wanl-more :goods="item.goods" />
			</view>

			<!-- 短视频内容模板 -->
			<view class="content" v-if="item.type == 'video'">
				<view class="video-item radius-bock" @tap="handleVideo(item.id)">
					<image :src="$wanlshop.oss(item.video.cover_url, 400, 0)" mode="aspectFill"></image>
					<view class="video-item-bg">
						<view class="video-item-play">
							<text class="wlIcon-bofang text-center"></text>
						</view>
					</view>
					<view class="video-item-content">
						<wanl-more :content="item.content" />
					</view>
				</view>
				<scroll-view class="scroll-view padding-top-bj padding-left-bj"
					:class="[data.goods.length == 1 ? 'padding-right-bj' : '']" scroll-x="true">
					<view class="scroll-view-item radius-bock" :class="[item.goods.length == 1 ? 'col-1' : '']"
						v-for="(goods, sub) in item.goods" :key="goods.id" @tap="onGoods(goods.id)">
						<view class="img">
							<image :src="$wanlshop.oss(goods.image, 50, 50)"></image>
						</view>
						<view class="goodsinfo text-cut text-df">
							{{ goods.title }}
							<view class="flex align-center">
								<text class="text-price text-orange">{{ goods.price }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 短视频内容模板 END-->
			<view class="content" v-if="item.type == 'want' || item.type == 'show'">
				<view class="swiper-box">
					<swiper circular="true" @change="swiperChange($event, index)">
						<swiper-item v-for="(swiper, key) in item.images" :key="key">
							<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="indicator">{{ item.current + 1 }}/{{ item.images.length }}</view>
				</view>
				<scroll-view class="scroll-view padding-top-bj padding-left-bj"
					:class="[data.goods.length == 1 ? 'padding-right-bj' : '']" scroll-x="true">
					<view class="scroll-view-item radius-bock" :class="[item.goods.length == 1 ? 'col-1' : '']"
						v-for="(goods, sub) in item.goods" :key="goods.id" @tap="onGoods(goods.id)">
						<view class="img">
							<image :src="$wanlshop.oss(goods.image, 50, 50)"></image>
						</view>
						<view class="goodsinfo text-cut text-df">
							{{ goods.title }}
							<view class="flex align-center">
								<text class="text-price text-orange">{{ goods.price }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="wanl-gray-dark padding-lr-bj padding-top-sm">
					<wanl-more :content="item.content" />
				</view>
			</view>
			<!-- 底部 -->
			<view class="flex justify-between padding-bj align-center">
				<view @tap="handleComments(index)" v-if="common.appConfig.comment_switch == 'Y'">
					<view class="cu-avatar round sm margin-right-xs" :style="{
							backgroundImage: `url(${$wanlshop.oss( user.avatar, 35, 35, 2, 'avatar' )})`
						}"></view>
					<text class="text-sm wanl-gray">快来评论吧</text>
				</view>
				<view v-else></view>
				<view class="flex">
					<view :class="{ 'wanl-orange': item.isLike === 1 }" @tap="handleLike(index)">
						<text class="margin-right-xs"
							:class="[item.isLike === 1 ? 'wlIcon-dianzan1' : 'wlIcon-dianzan11']"></text>
						{{ item.likes }}
					</view>
					<view class="margin-left" @tap="handleComments(index)"
						v-if="common.appConfig.comment_switch == 'Y'">
						<text class="wlIcon-pinglun margin-right-xs"></text>
						{{ item.comments }}
					</view>
					<view class="margin-left">
						<text class="wlIcon-yueduliang margin-right-xs"></text>
						{{ item.views }}
					</view>
				</view>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<view class="cu-modal bottom-modal" :class="modalName == 'comments' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal" style="padding-bottom: 0;">
						<view class="head padding-bj">
							<view class="content">
								<view class="text-lg">全部评论（{{commentData.count}}）</view>
							</view>
						</view>
						<view class="text-left padding-lr-bj padding-bottom-bj">
							<wanl-comment :findId="commentData.find_id" :commentList="commentData.list"
								:commenCount="commentData.count" @complete="handleComplete" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 结束 -->
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				find_id: 0,
				modalName: null,
				iShead: false,
				height: 0,
				afferent: false,
				data: {
					user: {
						avatar: '',
						nickname: '加载中...'
					},
					shop: {
						avatar: '',
						shopname: '加载中...'
					}
				},
				listData: [], //列表
				commentData: {
					find_id: 0,
					count: 0,
					list: []
				}, //评论列表
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '- 我是有底线的 -'
				}
			};
		},
		computed: {
			...mapState(['user', 'common'])
		},
		onLoad(option) {
			this.find_id = option.id;
			this.loadData();
			if (option.afferent === 'comments') {
				this.afferent = true;
			}
		},
		onPageScroll(e) {
			this.iShead = e.scrollTop > this.height ? true : false;
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadList();
			}
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/find/find/getDetails',
					data: {
						id: this.find_id
					},
					success: res => {
						this.data = res.data;
						this.loadList(res.data.user_no);
						// 计算锚点高度
						setTimeout(() => {
							this.calcAnchor();
						}, 1000);
					}
				});
			},
			async loadList(user_no) {
				await uni.request({
					url: '/wanlshop/find/find/getList',
					data: {
						user_no: user_no,
						page: this.current_page,
						find_id: this.find_id
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.listData = this.listData.concat(res.data.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
						if (this.afferent) {
							this.handleComments();
						}
					}
				});
			},
			async handleFollow(user_no) {
				if (this.$store.state.user.isLogin) {
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: user_no,
							type: 'follow'
						},
						success: res => {
							if (this.data.shop) {
								let concern = this.$store.state.statistics.dynamic.concern;
								if (res.data.data === 0) {
									concern -= 1;
								} else {
									concern += 1;
								}
								this.$store.commit('statistics/dynamic', {
									concern: concern
								});
							}
							this.data.isFollow = res.data.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			async handleLike(index = null) {
				if (this.$store.state.user.isLogin) {
					let data = index === null ? this.data : this.listData[index];
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.id,
							type: 'likes'
						},
						success: res => {
							if (res.data.data === 0) {
								data.likes -= 1;
							} else {
								data.likes += 1;
							}
							data.isLike = res.data.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			async handleComments(index = null) {
				let data = index === null ? this.data : this.listData[index];
				await uni.request({
					url: '/wanlshop/find/comments/getList',
					data: {
						id: data.id
					},
					success: res => {
						this.commentData = res.data;
						this.commentData.find_id = data.id;
						data.comments = res.data.count;
						this.modalName = 'comments';
					}
				});
			},
			// 1.1.4升级 播放视频
			handleVideo(id) {
				uni.navigateTo({
					url: `/pages/apps/find/details/video?id=${id}`
				})
			},
			handleComplete() {
				this.afferent = false;
				this.loadData();
				this.hideModal();
			},
			// 关闭弹出层
			hideModal() {
				this.modalName = null;
			},
			//轮播图指示器
			swiperChange(e, index) {
				if (index) {
					this.listData[index].current = e.detail.current;
				} else {
					this.data.current = e.detail.current;
				}
			},
			//计算锚点高度
			calcAnchor() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#main')
					.boundingClientRect(data => {
						this.height = data.height;
					})
					.exec();
			},
			handleUser(user_no) {
				this.$wanlshop.to(`/pages/apps/find/user?id=${user_no}`);
			},
			//禁止父元素滑动
			moveHandle() {}
		}
	};
</script>

<style>
	/* 发现页 */
	.wanl-find .userinfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wanl-find .userinfo .avatar {
		display: flex;
		align-items: center;
	}

	.wanl-find .userinfo .avatar .cu-tag {
		font-size: 20rpx;
		padding: 0px 10rpx !important;
	}

	.wanl-find .userinfo .cu-btn.sm {
		padding: 0 20rpx;
		font-size: 26rpx;
		height: 50rpx;
	}

	.wanl-find .userinfo text[class*='wlIcon-'] {
		font-size: 28rpx;
		margin-right: 5rpx;
	}

	.wanl-find .content {}

	.wanl-find .content .cu-tag.sm {
		padding: 6rpx;
	}

	/* 1.1.4升级 */
	.wanl-find .content .video-item {
		position: relative;
		margin: 0 25rpx;
		width: 55%;
		height: 650rpx;
	}

	.video-item-content {
		position: absolute;
		z-index: 3;
		bottom: 10rpx;
		width: 100%;
		font-size: 22rpx;
		color: #ffffff;
		margin: 0 10rpx;
	}


	.wanl-find .content .video-item image {
		width: 100%;
		height: 650rpx;
	}

	.wanl-find .content .video-item .video-item-bg {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .2);
		position: absolute;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wanl-find .content .video-item .video-item-bg .video-item-play {
		background-color: rgba(255, 255, 255, .2);
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		border-radius: 50%;
		padding-left: 30rpx;
		color: #ffffff;
	}


	.wanl-find .container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.wanl-find .container.col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.wanl-find .container .item {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #fff;
		min-height: 6rem;
		width: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.wanl-find .container .item.item-1 {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		height: 600rpx;
	}

	.wanl-find .container .item.item-3 {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.wanl-find .container .item.item-live {
		position: relative;
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	/* 直播-中心按钮 */
	.wanl-find .container .item.item-live .play {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.5);
		font-size: 56rpx;
		color: #fff;
	}

	/* 直播-状态 */
	.wanl-find .container .item.item-live .state {
		display: flex;
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, 0.1);
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.wanl-find .container .item.item-live .state>view {
		padding: 0 12rpx;
	}

	.wanl-find .container .item.item-live .state .tags {
		height: 100%;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.wanl-find .container .item.item-live .state .tags>text {
		margin-right: 4rpx;
	}

	/* 直播-商品数量 */
	.wanl-find .container .item.item-live .number {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 8rpx 8rpx 0 20rpx;
		overflow: hidden;
		padding: 8rpx 6rpx;
		top: 10rpx;
		right: 10rpx;
		line-height: 1;
		text-align: center;
	}

	.wanl-find .container .item.item-live .number>view {
		font-size: 30rpx;
	}

	.wanl-find .container .item.item-live .number>text {
		font-size: 11px;
	}

	.wanl-find .container .item.item-live .like {
		position: absolute;
		bottom: 15rpx;
		right: 30rpx;
		line-height: 1.2;
	}

	.wanl-find .container .item.item-live .like .likebut {
		background-color: #327CFF;
		border-radius: 50%;
		width: 45rpx;
		line-height: 46rpx;
		height: 45rpx;
		font-size: 26rpx;
	}

	.wanl-find .scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.wanl-find .scroll-view-item {
		display: inline-flex;
		width: 60%;
		height: 100rpx;
		overflow: hidden;
		margin-right: 10rpx;
		background-color: #f9f9f9;
		align-items: center;
	}

	.wanl-find .scroll-view-item.col-1 {
		width: 100%;
		margin-right: 0;
	}

	.wanl-find .scroll-view-item .img,
	.wanl-find .scroll-view-item .img image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 18rpx 0 0 18rpx;
		background-color: #efefef;
	}

	.wanl-find .scroll-view-item .content {
		flex: 1;
		line-height: 1.3;
	}

	.wanl-find .scroll-view-item .icon {
		width: 60rpx;
		text-align: center;
	}

	.wanl-find .content .calendar {
		width: 50rpx;
		height: 50rpx;
		line-height: 60rpx;
		background-size: 100%;
		font-size: 22rpx;
		font-weight: 600;
	}

	.cu-custom .cu-bar .content {
		width: calc(100% - 450rpx);
	}

	.cu-custom .userinfo {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cu-custom .userinfo .cu-avatar {
		flex-shrink: 0;
		width: 56rpx;
		height: 56rpx;
		overflow: hidden;
		border-radius: 1000px;
		margin: 0 !important;
	}

	.swiper-box {
		position: relative;
		background-color: #f7f7f7;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.wanl-find .scroll-view-item .img {
		margin: 0 10rpx;
	}

	.wanl-find .scroll-view-item .img,
	.wanl-find .scroll-view-item .img image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 18rpx;
	}

	.scroll-view-item .goodsinfo {
		line-height: 1.2;
	}
</style>